<template>
	<view class="wrap" :style="colorStyle">
		<view class="seach-box flex_s">
			<picker @change="bindPickerChange" :value="pickIndex" :range="array">
				<view class="text flex_s">

					<view class="uni-input">{{array[pickIndex]}}</view>
					<view class="iconfont icon-xiangxia" style="font-size: 26rpx;margin-left: 10rpx;"></view>

				</view>
			</picker>
			<view class="input_box">
				<view class='search flex_s'>
					<text class='iconfont icon-sousuo'></text>
					<input type='text' v-model='queryData.search' @confirm="takeSearch" placeholder="搜索订单号，客户手机号，客户姓名"
						placeholder-class='placeholder'></input>
				</view>
			</view>
		</view>
		<view class="list-box" v-if="dataList.length">
			<block v-for="(item,index) in dataList" :key="index">
				<view class="list">
					<view class="name" style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							{{ item.real_name || '名字' }}
							<text>距您{{ item.distance_hit || '' }}</text>
						</view>
						<view class="status" style="font-weight: 400;color: #999;font-size: 26rpx;">
							{{item.order_status_text||''}}
						</view>

					</view>
					<!-- 	<view class="btn-box" style="padding: 0;line-height: 24rpx;">
						<view class="time">
							{{ item.send_date || '--' }} {{ item.send_time  || '--' }}
						</view>
					</view> -->
					<view class="span">
						{{ item.user_address || '地址' }}
					</view>
					<view class="value_box">
						<view class="goods_item flex_ss" v-for="(itemn,indexn) in item.cartInfo" :key="indexn">
							<view class="left_img">
								<image :src="itemn.productInfo.image" mode="aspectFill"></image>
								<view class="change_box"  v-if="itemn.is_trade_in">
									<changeBoxVue/>
								</view>

							</view>
							<view class="right_info">
								<view class="title line1">
									{{itemn.productInfo.store_name||''}}
								</view>
								<view class="count_box flex_sb">
									<view class="count_item">克重：<text class="red">{{itemn.attrInfo.weight||0}}克</text>
									</view>
									<view class="count_item">数量：<text class="red">{{itemn.cart_num||0}}</text></view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view>
						<view class="btn-box" v-if="item.status == 1">
							<view class="time">
								实收克重：{{ item.reality_g || '0.00' }}g
								<text>已结算金料：{{ item.preknot_g || '0.00' }}g</text>
							</view>
						</view>
						<view class="btn-box" v-if="item.status == 2">
							<view class="time">
								实收克重：{{ item.reality_g || '0.00' }}g
								<text>已结算金料：{{ item.preknot_g || '0.00' }}g</text>
								<text>已入库金料：{{ item.be_g || '0.00' }}g</text>
							</view>
						</view>
					</view> -->
					<view class="btn-box flex_sb">
						<view class="text_box">
							<text>{{item.send_date||''}}</text>
							<text style="margin-left: 5rpx;">{{item.send_time||''}}</text>
						</view>
						<view class="my_btn">
							<view class="btn" v-if="queryData.delivery_status==1" @click.stop="openPop(item.id)">操作
							</view>
							<view class="btn" @click.stop="goAddress(item)">导航</view>
							<view class="btn" @click.stop="takePhone(item.phone)">电话</view>
						</view>

					</view>
				</view>
			</block>
		</view>
		<emptyPage v-else></emptyPage>
		<!-- <u-datetime-picker title="选择日期" :minDate="min_time" :show="is_time" v-model="time_value" mode="date"
			@cancel="takeClose" @close="takeClose" @confirm="takeConfirm"></u-datetime-picker> -->

		<!-- <u-picker :show="showStatus" immediateChange :columns="orderType == 1?typeHuan:typeSong"
			@confirm="takeConfirmShow" @cancel="takeCloseShow" @close="takeCloseShow"></u-picker> -->
		<uni-popup ref="popup" :safe-area="false" type="bottom" border-radius="8px 8px 0 0">
			<view class="alter-box">
				<view class="title">
					上传送货凭证
				</view>
				<view class="img-li">
					<view class="name">
						凭证图片
					</view>
					<view class="value1">
						<view class="li1" v-for="(item,index) in fileList" :key="index">
							<view class="close_icon flex_c" @click="delImg(index)">
								<view class="iconfont icon-guanbi"></view>
							</view>
							<image :src="item" mode="aspectFill"></image>
						</view>
						<view class="li1" @click="uploadImg" v-if="fileList.length<opt.count">
							<image src="../static/imgs/up.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="btn" @click="delivery_confirm">送货完成</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import changeBoxVue from "@/components/changeBox/changeBox.vue";
	import colors from "@/mixins/color";
	import emptyPage from "@/components/emptyPage.vue";
	import {
		delivery_list,
		delivery_confirm
	} from "@/api/new_api";
	import {
		debounceImmediate
	} from "@/utils/validate";
	export default {
		components: {
			emptyPage,
			changeBoxVue
		},
		mixins: [colors],
		data() {
			return {
				showStatus: false,
				showAction: false,

				is_time: false,
				time_value: Number(new Date()),

				alterMain: false,
				statusBarHeight: 0,
				userInfo: {},
				queryData: {
					longitude: '',
					latitude: '',
					search: '',
					page: 1,
					limit: 20,
					delivery_status: 1 //1:待上门 2：已送达
				},
				dataList: [],
				orderType: 1,
				checkVal: '全部',
				typeHuan: [
					['全部', '待上门', '已上门', '已完成', '取消订单', '关闭订单']
				],
				typeSong: [
					['全部', '待配送', '已完成', '取消订单', '关闭订单']
				],
				fileList: [],
				opt: {
					count: 1,
					url: 'upload/image'
				},
				pickIndex: 0,
				array: ['待上门', '已送达'],
				operateId: ''
			};
		},
		async onLoad(opition) {

		},
		onShow() {
			let that = this;
			that.queryData.latitude = uni.getStorageSync('lat');
			that.queryData.longitude = uni.getStorageSync('lng');
			if (!that.queryData.lat && !that.queryData.lng) {
				that.getLoaction()
			} else {
				that.getList();
			}
		},
		methods: {
			delivery_confirm: debounceImmediate(function() {

				let that = this
				const params = {
					oid: this.operateId,
					proof_img: this.fileList.join(',')
				}
				delivery_confirm(params).then((res) => {
					this.closePop()
					uni.showToast({
						title: res.msg,
						icon: "none",
						success() {
							setTimeout(() => {
								that.getList();
							}, 100)

						}
					})
				})
			}, 1000),
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.pickIndex = e.detail.value
				this.queryData.delivery_status = Number(this.pickIndex) + 1
				this.getList()
			},
			getLoaction() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						that.$Cache.set('lat', res.latitude)
						that.$Cache.set('lng', res.longitude)
						that.queryData.latitude = res.latitude;
						that.queryData.longitude = res.longitude;
						that.getList();
					},
					fail: err => {
						uni.showModal({
							title: '提示',
							content: '需要获取用户位置信息权限',
							confirmText: '前往设置',
							confirmColor: '#383838',
							success(res) {
								if (res.confirm) {
									wx.openSetting(); // 打开小程序设置页面，可以让用户开启需要的权限
								}
							}
						})
					}
				});

			},
			delImg(index, type) {
				this.fileList.splice(index)
			},
			uploadImg(type) {
				this.$util.uploadImageTwo(this.opt, (res) => {
					let data = res.data
					console.log(data, "上传的图片");
					this.fileList.push(data.url)
				}, (err) => {
					console.log(err, "失败");
				})
			},

			openPop(id) {
				this.operateId = id
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			closePop() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.close()
			},


			takeCloseShow() {
				this.showStatus = false
			},



			takePhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			goAddress(item) { //导航
				let that = this;
				let latitude = Number(item.latitude);
				let longitude = Number(item.longitude);
				uni.openLocation({
					// name: this.dataData.store_name,
					latitude: latitude,
					longitude: longitude,
					address: item.user_address,
					success: function() {
						console.log('success');
					}
				});
			},


			takeClear() {
				this.queryData.search = '';

				this.getList();
			},
			takeSearch(e) {
				this.queryData.page = 1;
				this.getList();
			},



			takeClose() {
				this.is_time = false;
			},


			getList() {
				delivery_list(this.queryData).then((res) => {
					console.log(res, '---------');
					this.dataList = res.data;
				}).catch((err) => {
					uni.$u.toast(err)
				})
			},



		},
	};
</script>
<style lang="scss" scoped>
	.wrap {
		overflow: hidden;
		width: 750rpx;
		min-height: 100vh;
		position: relative;
		background-color: #F6F7FB;
		padding-bottom: 30rpx;
		padding-top: 108rpx;

		.alter-box {
			background: #fff;
			min-height: 1000rpx;
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			padding-bottom: 50rpx;

			.title {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 110rpx;
				padding: 0 30rpx;
				border-bottom: solid 1rpx #E5E5E5;
			}

			.input-li {
				width: 670rpx;
				border-radius: 10rpx;
				background: #F6F6F6;
				padding: 10rpx 30rpx;
				line-height: 80rpx;
				margin: 30rpx auto;
				overflow: hidden;
				color: #3B3A39;
				font-size: 28rpx;

				.name {
					width: 50%;
					display: inline-block;
					vertical-align: top;
				}

				.value {
					width: 50%;
					display: inline-block;
					vertical-align: top;
					text-align: right;

					input {
						width: calc(100% - 60rpx);
						display: inline-block;
						vertical-align: top;
						height: 80rpx;
						font-size: 28rpx;
						text-align: right;
						margin-right: 10rpx;
					}
				}
			}

			.img-li {
				width: 670rpx;
				border-radius: 10rpx;
				background: #F6F6F6;
				padding: 10rpx 30rpx 30rpx 30rpx;
				line-height: 60rpx;
				margin: 30rpx auto;
				overflow: hidden;
				color: #3B3A39;
				font-size: 28rpx;

				.name {
					width: 100%;
				}

				.value1 {
					width: 100%;
					overflow: hidden;

					.li1 {
						position: relative;
						width: 108rpx;
						height: 108rpx;
						border-radius: 8rpx;
						overflow: hidden;
						display: inline-block;
						vertical-align: top;
						margin: 20rpx 20rpx 0 0;

						.close_icon {
							position: absolute;
							right: 0;
							top: 0;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							overflow: hidden;
							background: var(--view-theme);

							.iconfont {
								color: #fff;
								font-size: 18rpx;
							}
						}

						image {
							width: 100%;
							height: 108rpx;
							display: inline-block;
							vertical-align: top;
						}
					}
				}

				.value {
					width: 100%;
					overflow: hidden;

					.li {
						width: 108rpx;
						height: 108rpx;
						border-radius: 8rpx;
						overflow: hidden;
						display: inline-block;
						vertical-align: top;
						margin: 20rpx 20rpx 0 0;

						image {
							width: 100%;
							height: 108rpx;
							display: inline-block;
							vertical-align: top;
						}
					}
				}
			}

			.btn {
				width: 720rpx;
				line-height: 90rpx;
				border-radius: 10rpx;
				text-align: center;
				color: white;
				font-size: 30rpx;
				font-weight: 700;
				background: var(--view-theme);
				margin: 600rpx auto 0rpx;
			}
		}

		.bg-box {
			width: 100%;
			background: #C0C5CA;
			position: absolute;
			left: 0;
			top: 0;
			height: 300rpx;
			z-index: 0;
		}

		.user-box {
			width: 700rpx;
			padding: 30rpx;
			position: relative;
			z-index: 2;
			margin: 0rpx auto;
			color: #3B3A39;
			font-size: 34rpx;
			line-height: 54rpx;
			position: relative;

			.img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				display: inline-block;
				vertical-align: top;
				margin: 10rpx 10rpx 0 0;

				image {
					width: 100%;
					min-height: 100%;
				}
			}

			.text-d {
				width: calc(100% - 100rpx);
				display: inline-block;
				vertical-align: top;
				padding-left: 10rpx;

				.phone {
					font-size: 26rpx;
				}
			}
		}

		.value-box {
			width: 700rpx;
			border-radius: 12rpx;
			background-color: white;
			position: relative;
			z-index: 2;
			color: #3B3A39;
			font-size: 28rpx;
			line-height: 50rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;
			margin: 30rpx auto;

			.title {
				line-height: 80rpx;

				image {
					width: 22rpx;
					height: 12rpx;
					display: inline-block;
					vertical-align: top;
					margin: 34rpx 0 0 10rpx;
				}
			}

			.li {
				width: 50%;
				display: inline-block;
				vertical-align: top;
				text-align: center;

				.value {
					line-height: 80rpx;
					font-size: 50rpx;
					font-weight: 700;
				}
			}
		}

		.tab-box {
			width: 100%;
			background-color: white;
			text-align: center;
			color: #383838;
			font-size: 34rpx;
			font-weight: 700;
			line-height: 100rpx;

			.li {
				width: 50%;
				display: inline-block;
				vertical-align: top;
				text-align: center;
				position: relative;
			}

			.main {
				color: #643400;
			}

			.main::after {
				content: '';
				width: 130rpx;
				height: 6rpx;
				position: absolute;
				right: calc(50% - 65rpx);
				bottom: 0;
				background: #643400;
			}
		}

		.seach-box {
			position: fixed;
			top: 0;
			left: 0;
			height: 108rpx;
			width: 100%;
			background-color: white;
			color: #383838;
			font-size: 30rpx;
			font-weight: 400;
			padding: 20rpx 20rpx 20rpx 46rpx;

			.text {
				vertical-align: top;
				flex-shrink: 0;
				margin-right: 20rpx;

				image {
					width: 26rpx;
					height: 14rpx;
					display: inline-block;
					vertical-align: top;
					margin: 24rpx 0 0 10rpx;
				}
			}

			.input_box {
				display: flex;
				align-items: center;
				background-color: #f7f7f7;
				border-radius: 12rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				height: 66rpx;
				flex-grow: 1;

				.search {
					width: 100%;

					.iconfont {
						margin-right: 12rpx;
					}
				}

				.placeholder {
					color: #999;
				}

				input {
					flex-grow: 1;
					font-size: 28rpx;
				}
			}
		}

		.list-box {
			width: 710rpx;
			overflow: hidden;
			margin: 0 auto;

			.list {
				width: 100%;
				margin-top: 20rpx;
				border-radius: 12rpx;
				background: white;
				padding: 30rpx 24rpx 0 24rpx;
				font-size: 28rpx;
				color: #3B3A39;

				.name {
					font-weight: 700;

					text {
						color: #D43030;
						font-size: 26rpx;
						font-weight: 400;
						margin: 0 10rpx;
					}
				}

				.span {
					line-height: 80rpx;
					border-bottom: solid 1rpx #F6F6F6;
				}

				.value_box {
					// overflow: hidden;
					font-weight: 700;
					border-bottom: solid 1rpx #F6F6F6;
					padding-bottom: 13rpx;

					.goods_item {
						margin-top: 13rpx;

						.red {
							color: #E01005 !important;
						}

						.left_img {
							position: relative;
							flex-shrink: 0;
							width: 108rpx;
							height: 108rpx;
							border-radius: 8px;
							background: #CCCCCC;

							.change_box{
								position: absolute;
								left: -23rpx;
								top: -3rpx;
							}

							image {
								width: 100%;
								height: 100%;
							}
						}

						.right_info {
							height: 108rpx;
							margin-left: 14rpx;
							flex-grow: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							overflow: hidden;

							.title {
								font-size: 28rpx;
								color: #000000;
								margin-bottom: 23rpx;
							}

							.count_box {
								font-size: 26rpx;
								color: #737272;

								.count_item {}
							}
						}
					}
				}

				.btn-box {
					padding: 30rpx 0;
					overflow: hidden;
					line-height: 66rpx;

					.text_box {
						font-size: 26rpx;
						color: #3B3A39;
					}

					.time {
						display: inline-block;
						vertical-align: top;
						font-size: 26rpx;
						color: #383838;

						text {
							margin-left: 20rpx;
						}
					}

					.btn {
						width: 110rpx;
						border-radius: 12rpx;
						text-align: center;
						float: right;
						display: inline-block;
						vertical-align: top;
						margin-left: 20rpx;
						background: #EEEEEE;
						font-size: 30rpx;
						color: #383838;
					}
				}
			}
		}
	}
</style>